<template>
	<div>
    <div class="container">
		<div class="handle-box">
			<label class="label" >客户类型：</label>
			<el-input class="handle-input" v-model="searchData.customType" >
                    <template #append>
                        <el-select v-model="searchData.customType" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.customTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
			<label class="label" >客户归属：</label>
			<el-input class="handle-input" v-model="searchData.customAff" >
                    <template #append>
                        <el-select v-model="searchData.customAff" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.customAffs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
                <label class="label">面试时间:</label>
                <el-date-picker
                    v-model="searchData.interviewTime"
                    type="daterange"
                    range-separator="到"
                    style="width: 150px; margin-right: 8px;"
                />
                <label class="label">电话:</label>
			<el-input class="handle-input" v-model="searchData.phone"/>
				<el-button color="#1c84c6" class="handle-btn"  @click="handleSearch">查询</el-button>
				<el-button color="#F8AC59"  style="color: #fff;" class="handle-btn"  @click="reset">重置</el-button>
				<el-row class="top-btn">
                    <el-button color="#1AB394" style="color: #fff;" @click="open">新增客户</el-button> 
                    <el-button color="#23c6c8"  style="color: #fff;" @click="open">分配客户</el-button> 
                    <el-button color="#ED5565" style="color: #fff;" @click="handleAllDelete">删除</el-button>     
			</el-row>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
			 	height="380"
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<el-table-column  prop="id" label="序号"  ></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="customType" label="客户类型"></el-table-column>
                <el-table-column prop="customAff" label="客户归属"></el-table-column>
                <el-table-column prop="customSource" label="客户来源"></el-table-column>
                <el-table-column prop="interviewTime" label="面试时间"></el-table-column>
				<el-table-column label="操作" width="280" align="center" >
					<template #default="scope">
							<el-button-group class="right-btn">
                        <el-tooltip content="签约" placement="bottom" effect="light">   
						    <el-button color="#23c6c8"  style="color: #fff;" @click="isSigningDialog(scope.row)" >
								<i class="iconfont icon-spanner-fill "></i>
							</el-button>
						</el-tooltip>
						<el-tooltip content="详情" placement="bottom" effect="light"> 
							<el-button color="#23c6c8"  style="color: #fff;"  @click="customDetailDialog(scope.row)">
								<i class="iconfont icon-question-circle-fill "></i>
							</el-button>
						</el-tooltip>
						<el-tooltip content="删除" placement="bottom" effect="light"> 
							<el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.$index)"></el-button>
						</el-tooltip>
                        <el-tooltip content="修改" placement="bottom" effect="light">   
						    <el-button color="#F8AC59"  style="color: #fff;"  :icon="Edit" @click="open(scope.$index,scope.row)" ></el-button>
						</el-tooltip>
						
                        <el-tooltip content="跟进记录" placement="bottom" effect="light">   
						    <el-button color="#1AB394"  style="color: #fff;"   @click="followDialog(scope.row)" >
								<i class="iconfont icon-stickynote white "></i>
							</el-button>
						</el-tooltip>
						<el-tooltip content="邮箱" placement="bottom" effect="light"> 
							<el-button color="#23c6c8"  style="color: #fff;"  @click="emailDialog(scope.row)">
								<i class="iconfont icon-youxiang  white"></i>
							</el-button>
						</el-tooltip>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>

		<!-- 修改/新增弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="750" >
			<el-form  label-width="85" :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="客户姓名:"  >
					<el-input v-model="form.name" ></el-input>
				</el-form-item>
				<el-form-item label="客户性别:">
                 <el-select v-model="form.gender" clearable  class="form-w" >
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
			    </el-select>
				</el-form-item>
                <el-form-item label="联系电话:">
					<el-input v-model="form.phone" placeholder="请输入电话号码"></el-input>
				</el-form-item>
                <el-form-item label="个人邮箱:" >
					<el-input v-model="form.phone" placeholder="请输入邮箱"></el-input>
				</el-form-item>
                <el-form-item label="渠道类型:" >
					<el-input  v-model="form.sourceType" class="form-w">
                    <template #append>
                        <el-select v-model="form.sourceType" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.sourceTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
				</el-form-item>
                <el-form-item label="客户渠道:" >
			    <el-input  v-model="form.customSource"   class="form-w">
                    <template #append>
                        <el-select v-model="form.customSource" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.customAffs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
				</el-form-item>
                <el-form-item label="客户类型:" >
					<el-input  v-model="form.customType" class="form-w">
                    <template #append>
                        <el-select v-model="form.customType" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.customTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
				</el-form-item>
                <el-form-item label="原本专业:" >
					<el-input  v-model="form.professional" ></el-input>
				</el-form-item>
                <el-form-item label="面试时间:" >
					<el-date-picker
						v-model="form.interviewTime"
						type="date"
						placeholder="Pick a date"
						clearable
					/>
				</el-form-item>
              
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#C2C2C2" style="color: #fff;" @click="editVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 是否签约的弹窗-->
		<el-dialog title="是否签约" v-model="isSigningDialogVisible" width="750" >
			<el-form  label-width="85" :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="客户姓名:"  >
					<el-input v-model="formSign.name"  disabled></el-input>
				</el-form-item>
				<el-form-item label="预付金额:"  >
					<el-input v-model="formSign.money" ></el-input>
				</el-form-item>
				<el-form-item label="总金额:"  >
					<el-input v-model="formSign.totalMoney" ></el-input>
				</el-form-item>
				<el-form-item label="是否贷款:"  >
					<el-input  v-model="formSign.loan" class="form-w">
                    <template #append>
                        <el-select v-model="form.sourceType" style="width: 44px;" :suffix-icon="CaretBottom">
							<el-option label="贷款" value="贷款"></el-option>
							<el-option label="未贷款" value="未贷款"></el-option>
                		</el-select>
                    </template>
                </el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#C2C2C2" style="color: #fff;" @click="isSigningDialogVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="addSignCustom">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 邮箱的弹窗-->
		<el-dialog title="编辑邮箱" v-model="emailDialogVisible" width="750" >
			<el-form  label-width="85" :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="收件人:"  >
					<el-input v-model="formEmail.recipient" ></el-input>
				</el-form-item>
				<el-form-item label="发件人:"  >
					<el-input v-model="formEmail.sender" ></el-input>
				</el-form-item>
				<Editor></Editor>
			</el-form>
			
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#C2C2C2" style="color: #fff;" @click="emailDialogVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="sendEmail">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- </div> -->
	</div>
</template>

<script setup >
import { ref, reactive ,toRefs} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,CaretBottom } from '@element-plus/icons-vue';
import { getClientList} from '../../api/client' ;
import  Editor from '../../components/WEditor.vue'

let props = defineProps({
	choseId:Number,
 })
const {choseId} = toRefs(props)
const emit = defineEmits(['update:choseId','sendRow'])


//查询部分
const searchData = reactive({
    customType:'',
    customAff:'',
    interviewTime:'',
    phone:''
})
// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
//重置
const reset=()=>{
    searchData.customType=''
    searchData.customAff=''
    searchData.interviewTime=''
    searchData.phone=''
}

const options = reactive({
customTypes:[
	{
		value: '所有客户',
		label: '所有客户',
 	 },
  {
    value: '潜在客户',
    label: '潜在客户',
  },
  {
    value: '邀约一面客户',
    label: '邀约一面客户',
  },
  {
    value: '邀约失败客户',
    label: '邀约失败客户',
  },
  {
    value: '一面可跟进客户',
    label: '一面可跟进客户',
  },
  {
    value: '丢单',
    label: '丢单',
  },
  {
    value: '签约成功',
    label: '签约成功',
  },
  ],
  customAffs:[
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '潜在客户',
    label: '潜在客户',
  },
  ],
  sourceTypes:[
  {
    value: '招聘网站',
    label: '招聘网站',
  },
  {
    value: '学校',
    label: '学校',
  },
  {
    value: '企业',
    label: '企业',
  },
  {
    value: '其他',
    label: '其他',
  },
  ]
  
}
)
	
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getClientList({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};



// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};
//删除多个数据  to......
const handleAllDelete =()=>{
	// console.log('删除多个')
	console.log(state.multipleSelection,'===拿到所有选择的数据====')
	if (state.multipleSelection.length==0) {
		ElMessage.error('请选择项')
		return
  	}
	// console.log(state.multipleSelection.map(item=>item.id))
	//axios删除的操作
	// deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})

	
}




// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    id: '',
    uid: '',
    name: '',
    gender: '',
    phone: '',
    email: '',
    customType: '',
    customAff: '',
    professional: '',
    customSource: '',
    interviewTime: '',
	sourceType:''
});

// 
let titleEdit = ref('修改')
let isDisable = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
		titleEdit.value = "修改"
		handleEdit(index,row)
	}else{
		//把第一个输出改为可编辑
		isDisable.value=false
		//清空表单中的数据
		titleEdit.value = "新增";
		form.id=''
		form.uid=''
		form.name=''
		form.gender=''
		form.phone=''
		form.email=''
		form.customType=''
		form.customAff=''
		form.professional=''
		form.customSource=''
		form.interviewTime=''		
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx = -1;
const handleEdit = (index,row) => {
	idx = index;
    form.id = row.id;
	form.uid=row.uid
	form.name=row.name
	form.gender=row.gender
	form.phone=row.phone
	form.email=row.email
	form.customType=row.customType
	form.customAff=row.customAff
	form.professional=row.professional
	form.customSource=row.customSource
	form.interviewTime=row.interviewTime	
	editVisible.value = true;
};
//保存添加或者修改的数据 ---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	// ElMessage.success(`修改第 ${idx + 1} 行成功`);
	//调用跟后台几口
};

//跟进详情 弹框
const isSigningDialogVisible =ref(false)
//表单数据
const formSign = reactive({
	name:'',
	money:'',
	totalMoney:'',
	loan:''
})
const isSigningDialog = (row)=>{
	formSign.name= row.name
	isSigningDialogVisible.value=true
}
//保存签约客户
const addSignCustom=()=>{
	//。。。。to 自己实现
	isSigningDialogVisible.value=false
	
}

//客户详情页面
const customDetailDialog = (row)=>{
	emit('update:choseId',2)
	emit('sendRow',row)
}
//跟进记录页面
const followDialog= (row)=>{
	emit('update:choseId',3)
	emit('sendRow',row)
}

//邮箱弹框
const  emailDialogVisible =ref(false)
//邮件数据
const formEmail = reactive({
	recipient:'',
	sender:'',
})
const emailContent= ref('<p class="customerName">叶建雄</p>')
const emailDialog =(row)=>{
	formEmail.recipient=row.email
	formEmail.sender = 'huangfei1230@sina.com'
	emailDialogVisible.value= true
}
//发送邮件

const sendEmail=()=>{
	//自己实现....
	emailDialogVisible.value = false
}
</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
}

.el-select {
	width: 200px;
	// margin-right: 10px;  
}

.handle-input {
	width: 130px;
    margin-right: 8px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin-right: 2px;
   font-weight: 700; 
}

.top-btn{
	float: right;
	.el-button{
		margin-left: 3px;
        // height: 28px;
        width: 60px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.form-w{
	width: 220px;
}

</style>